<!--
 * @Author: wangding
 * @Date: 2020-10-22 17:14:47
 * @LastEditTime: 2020-12-25 11:20:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\role\add.vue
-->
<template>
    <div>
        <el-dialog
            :title="$t('site.relate_wifiSN_batch')"
            :visible="visibleBind2"
            v-if="visibleBind2"
            width="30%"
            @close="()=>{$store.commit('setVisibleBind2',false)}">
            <el-row :gutter="24">
                <el-col :offset="5" :span="9">
                    <el-upload
                        class="upload"
                        :action="url"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :data="uploadData"
                        :limit="3"
                        :on-exceed="handleExceed"
                        :on-success="onsuccess"
                        :headers='{token:token}'
                        :file-list="file">
                        <el-button size="small" type="primary">{{$t('site.relate_wifiSN_batch')}}</el-button>
                    </el-upload>
                </el-col>
                <el-col  :offset="0" :span="9">
                    <el-button @click="download('form')">{{$t('download.templates')}}</el-button>
                </el-col>
                <div slot="tip" class="el-upload__tip">{{$t('only-excel')}}</div>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        selRow:''
    },
    data() {
        return {
            url:'',
            url_download:'',
            uploadData:{
                siteId:'',
                userId:'',
                domain:''
            },
            file:[]
        };
    },
    computed: {
        visibleBind2(){
            return this.$store.state.sysStore.visibleBind2
        },
        token(){
            return sessionStorage.getItem('token')
        }
    },
    watch: {
        selRow:{
            handler(nv,ov){
                console.log(this.uploadData)
                this.uploadData={
                    siteId:this.selRow.ids,
                    userId:this.selRow.userIds,
                    domain:window.location.host
                }
                this.file=[]
                console.log(this.uploadData)
            }
        }
    },
    created() {

    },
    mounted() {
        this.url=process.env.VUE_APP_BASE_API2+'/site/siteLinkWifiSnBatch'
        this.url_download=process.env.VUE_APP_BASE_API2+'/site/downLoadTemplate'
    },
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(this.$t('file-choose-msg1')+` ${files.length} ${this.$t('file-choose-msg2')} ${files.length + fileList.length}${this.$t('file-choose-msg3')} `);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`${this.$t('confirm-remove')} ${ file.name }？`);
        },
        onsuccess(res, file, fileList){
            if(res.success){
                this.$message.success(this.$t('site.sn_binding_success'))
            }else{
                this.$message.warning(this.$t('site.js_relate_fail'))
            }
            console.log(res)
            console.log(file)
            console.log(fileList)
        },
        download(){
            this.comm.windowOpen('/site/downLoadTemplate')
        },
        handleDownload(item) {
            let elemIF = document.createElement("iframe");
            elemIF.src = `${this.url_download}`;
            elemIF.style.display = "none";
            document.body.appendChild(elemIF);
        },
    },
};
</script>

<style  lang="less">
    [btn-add],[btn-remove]{
        position: absolute;
        right: -40px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        color: #828282;
        cursor: pointer;
        &:hover{
            color: #e6a300;
        }
    }
    [btn-add]{
        right: -40px;
    }
    [btn-remove]{
        right: -80px;
    }
</style>
